<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="demo">
        <h2>列表渲染-数组</h2>
        <ul>
            <li v-for="(item,index) in persons" :key="item.id">
                {{index}} --- {{item.id}}---{{item.name}}---{{item.age}}---
                <button @click="deleteP(index)">删除</button>
                <button @click="updataP(index,{id:item.id,name:'老王吧！',age:23})">更新</button>
            </li>
        </ul>
        <br>
        <h2>列表渲染-对象</h2>
        <ul>
            <li v-for="(value,key) in persons[1]" :key="key">
                {{key}}={{value}}
            </li>
        </ul>
        <!-- 
            对象和数组列表渲染的方式是不同的
            对象可以通过getter和setter来监听属性值的变化从而重新渲染到页面
            数组没有setter和getter的方法可以设置但是太麻烦，要给数组内每个下标都都设置这两个方法
            数组通过在Vue内部重写的数组方法来实现列表的渲染
            数组重写方法有pop()\push()\shift()\unshift()\sort()\reverce()\splice()
         -->
    </div>
    <script src="../day02/js/vue.js"></script>
    <script>
        new Vue({
            el:'#demo',
            data:{
                persons:[
                    {id:1,name:'张三',age:12},
                    {id:2,name:'李四',age:13},
                    {id:3,name:'王五',age:14},
                    {id:4,name:'赵六',age:15},
                    {id:5,name:'离奇',age:16}
                ]
            }, 
            methods:{
                deleteP(index){
                    this.persons.splice(index,1)
                },
                updataP(index,newP){
                    this.persons.splice(index,1,newP);
                    // 或者可以写成
                    /* this.persons[index].name=newP.name;
                    this.persons[index].age = newP.age; */
                }
            }
        })
    </script>
</body>
</html>